<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        webpack:

        nodejs-commonJS规范-规定了导入和导出方式
        导出module.exports = {}
        导入const '变量' = require('模块标识')
        ES6规范
        导出export或者export defalt {}
        导入import'变量名'from '模块标识'

        开发环境：development
        生产环境：production

        dependencies：别人使用你的包必须下载的依赖，比如jquery
        devDependenies:开发你的包需要依赖的包，比如webpack、webpack-cli -D(--save-dev)
     -->
     <!-- 
        一：webpack
        概念：把很多文件打包整合到一起，缩小项目体积，提高加载速度 
        是一个模块包，识别代码，翻译、压缩、整合打包；提高打开网站的速度
        功能举例：
        less/sass => css
        ES6/7/8 => ES5
        html/css/js => 压缩合并

        二：使用步骤：
        1.初始化包环境 yarn init
        2.安装依赖包 yarn add webpack-cli -D
        3.配置scripts(自定义命令)
        script：{
            'build':'webpack'
        }
        4.新建目录src
        5.新建src/add/add.js-定义和函数导出
        export const addFn  (a,b) => a + b
        6.新建src/index.js导入使用
        import {addFn} from './add/add'
        7.运行打包命令
        yarn build

        更新打包：
        新增代码后，只需在index.js中导入文件，重新执行yarn build命令即可
        src下：开发环境，dist下：打包后的分别独立
        打包后，格式压缩，变量压缩等
      -->
      <!-- 
        三：webpack的配置
        webpack从哪里开始打包，输出到哪里
        默认入口：./src/index.js
        默认出口：./dist/main.js

        通过配置，修改打包的默认入口和出口
        1.在src并列处，新建webpack.config.js
        2.填入配置项
        const path = require('path')
        module.exports = {
        entry: './src/main.js',  //通过entry设置入口文件路径
        output: {  //通过output对象设置出口路径和文件名
          path: path.resolve(__dirname, 'dist'),
          filename: 'bundle.js'
        }
      };
        3.修改入口文件名
        4.观察打包效果

        //通过yarn build，执行了webpakc命令，找到配置文件，入口和依赖关系，打包代码输出到指定位置

        打包模式：
        production：生产模式，是要上线的，打包的代码没有注释，空格，换行等；
        development：开发模式，不会压缩混淆，注释都在

        案例：隔行变色，
        初始化-下载webpack-webpack-cli，配置自定义命令build-下载依赖包juery-新建public(静态资源)下index.html，准备一些li标签-在main.js中引入jquery，编写功能代码-执行打包命令将main.js和html文件打包到dist下的bundle.js中-复制public下的html到dist，然后引入打包后的js


        为了不用在打包后手动建立html文件
        1.下载插件(plugin)  
        yarn add html-webpack-plugin -D
        2.在webpack.config.js中添加配置
        通过配置，打包后自动在dist中生成html文件

        打包css 
        ——css-loader：让webpack能处理css类型文件
        ——style-loader：把css插入到DOM中
        配置到webpack.config.js

        打包less
        ——less-loader：识别less文件
        配置到webpack.config.js

        打包图片
        方法一：url-loader和file-loader
        方法二：针对图片文件设置type：'assets'即可
        小于8KB文件, 文件转base64打包在js中, 大于8KB, 文件自动命名输出到dist下
        因为：放到js中，浏览器就不需要发送请求了，直接读取，速度快
        但是当图片过大时，再转成base64就会让图片的体积增大30%左右，得不偿失

        打包字体图标
        1.先在assets下放入fonts字体相关文件夹
        2.然后在main.js中引入iconfont.css
        3.使用字体图标添加到body上
        4.. 添加针对字体文件的加载器规则, 使用asset/resource(直接输出文件并配置路径)

        语法降级
        babel babel-loader
        babel是一个js编译器，可以把高版本的js语法降级处理输出兼容的低版本语法
        babel-loader可以让webpack转译打包的js代码
       -->
       <!-- 
        四：webpack开发服务器
        每次修改代码，重新yarn build打包才能看到最新的效果，非常麻烦；
        解决：开发服务器：缓存打包过的内容，只重新打包修改的文件；
        使用步骤：
        1.下载模块包 yarn add webpack-dev-server -D
        2.在package.json中自定义启动命令 serve
        3.在项目根目录执行命令yarn serve 启动开发服务器

        -->

</body>
</html>